<template>
  <div class="find-wrapper">
    <div class="search-box">
      <div class="search">
        <i class="iconfont icon-search"></i>
        <input type="text" v-model="query" placeholder="请输入 导演/电影"/>
        <i class="iconfont icon-delete" @click="query = ''"></i>
      </div>
    </div>
      <scroll :data="result" class="search-wrapper" :pullup="true" @scrollToEnd="scrollToEnd">
        <div>
          <Item v-for="(item,index) in result" :item="item" :showBtn="false" :key="index" @click.native="goDeatil(item.id)"></Item>
          <div class="loadmore" v-show="start < total && result.length">正在加载中...</div>
          <div class="loadmore" v-show="start === total && result.length">没有了...</div>
        </div>
        <loading v-show="loading"></loading>
      </scroll>
  <transition name="right">
    <router-view></router-view>
  </transition>
  </div>

</template>

<script>
  import jsonp from '@/common/js/jsonp'
  import scroll from '@/components/scroll/scroll'
  import Item from '@/components/film/film'
  import loading from '@/components/loading/loading'

  export default {
    data () {
      return {
        query: '',
        result: [],
        start: 0,
        total: 0,
        loading: false
      }
    },
    watch:{
      query (newVal){
        if (newVal){
          if (this.timer) clearTimeout(this.timer)
          this.loading = true
          this.start = 0
          this.total = 0
          this.result = []
          this.timer = setTimeout(() => {
            this._searchFilm()
          },500)
        }
      }
    },
    methods:{
      _searchFilm (){
        jsonp('https://api.douban.com/v2/movie/search?q=' + this.query,{
          start: this.start,
          count: 10
        }).then((data) => {
          this.result = this.result.concat(data.subjects)
          this.total = data.total
          this.loading = false
        })
      },
      scrollToEnd (){
        let len = this.result.length
        this.start = len
        if (this.start === this.total) return
        this._searchFilm()
      },
      goDeatil (id){
        this.$router.push('/find/' + id)
      }
    },
    components:{
      scroll,
      Item,
      loading
    }
  }
</script>

<style scoped>
  .search-box {padding:20px 36px;}
  .search {height:52px; border-radius:8px; background:#f5f5f5; position:relative; display:flex;}
  .search i {width:60px; line-height:56px; text-align:center; color:#999;}
  .search i.icon-delete {font-size:44px;}
  .search input {flex:1; border:0; outline:0; background:none; line-height:56px; height:56px; font-size:28px; color:#666;}

  .search-wrapper {position:absolute; left:0; top:88px; right:0; bottom:88px; background:#f5f5f5; overflow:hidden;}
  .loadmore {text-align:center; line-height:64px; color:#999; text-align:center;}
  ::-webkit-input-placeholder{color:#bbb;}
  ::-moz-placeholder {color:#bbb;}
</style>
